import 'package:flutter/material.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
import 'package:wechat_assets_picker_plus/src/asset_model.dart';
import 'package:wechat_assets_picker_plus/src/const.dart';

// 用户“发布”图片视频组件
class MediaContentEditView extends StatelessWidget {
  // 媒体文件路径
  final List<AssetModel> assetModels;

  // 点击"➕"
  final void Function() addOnTap;

  // "预览"
  final void Function(AssetModel) previewOnTap;

  // 点击 " x "
  final void Function(AssetModel) deleteOnTap;

  // 限制宽度
  final double width;

  // item背景
  final Color? itemBackground;

  // 是否支持删除
  final bool? isSupportDelete;

  MediaContentEditView({
    required this.width,
    required this.assetModels,
    required this.addOnTap,
    required this.deleteOnTap,
    required this.previewOnTap,
    this.itemBackground,
    this.isSupportDelete,
  });

  final double threeItemsSpace = 9;

  // 水平缝隙
  final double hSpace = 0;

  // 垂直缝隙
  final double vSpace = 16;

  @override
  Widget build(BuildContext context) {
    if (assetModels.isEmpty) {
      throw ("请添加默认'+'模型 AssetModel.isAdd");
    }
    if (assetModels.length > 9) {
      throw ("资源文件数量不能超过 9 张");
    }
    double w = (width - 2 * hSpace - 2 * threeItemsSpace) / 3;
    List<Widget> childrens1 = [];
    List<Widget> childrens2 = [];
    List<Widget> childrens3 = [];
    for (var i = 0; i < assetModels.length; i++) {
      var rowFirst = i % 3 == 0;
      if (childrens1.length < 3) {
        if (assetModels[i].isAdd) {
          childrens1.add(_buildAddWidget(w, w, rowFirst));
        } else {
          childrens1.add(_buildImageWidget(assetModels[i], w, w, rowFirst));
        }
      } else if (childrens1.length >= 3 && childrens2.length < 3) {
        if (assetModels[i].isAdd) {
          childrens2.add(_buildAddWidget(w, w, rowFirst));
        } else {
          childrens2.add(_buildImageWidget(assetModels[i], w, w, rowFirst));
        }
      } else if (childrens2.length >= 3 && childrens3.length < 3) {
        if (assetModels[i].isAdd) {
          childrens3.add(_buildAddWidget(w, w, rowFirst));
        } else {
          childrens3.add(_buildImageWidget(assetModels[i], w, w, rowFirst));
        }
      }
    }
    return Container(
      padding: EdgeInsets.only(left: hSpace, top: vSpace, bottom: vSpace),
      child: Column(
        children: [
          Row(
            children: childrens1,
          ),
          Visibility(
            visible: childrens2.isNotEmpty,
            child: SizedBox(
              height: threeItemsSpace,
            ),
          ),
          Row(
            children: childrens2,
          ),
          Visibility(
            visible: childrens2.isNotEmpty,
            child: SizedBox(
              height: threeItemsSpace,
            ),
          ),
          Row(
            children: childrens3,
          )
        ],
      ),
    );
  }

  // 构建图片组件
  _buildImageWidget(AssetModel assetModel, double w, double h, bool rowFirst) {
    return Stack(
      alignment: Alignment.topRight,
      children: [
        GestureDetector(
          onTap: () => previewOnTap(assetModel),
          child: Container(
            margin: EdgeInsets.only(left: rowFirst ? 0 : threeItemsSpace),
            width: w,
            height: h,
            child: Stack(
              alignment: Alignment.center,
              children: [
                assetModel.thumbFile.path.isEmpty
                    ? ClipRRect(
                        borderRadius: BorderRadius.circular(4.0), // 设置圆角半径
                        child: Container(
                          color: Colors.black,
                          width: w,
                          height: h,
                          child: FadeInImage(
                            fit: BoxFit.cover,
                            placeholder: AssetImage(
                                "assets/images/wechat_assets_picker_plus_placeholder_img.png",
                                package: Constant.PACKAGE_NAME),
                            image: NetworkImage(assetModel.src),
                          ),
                        ),
                      )
                    : Image.file(
                        assetModel.thumbFile,
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: double.infinity,
                      ),
                Visibility(
                  visible: assetModel.type == AssetType.video,
                  child: SizedBox(
                    width: 30,
                    height: 30,
                    child: Image.asset(
                      "assets/images/wechat_assets_picker_plus_start_play.png",
                      package: Constant.PACKAGE_NAME,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Visibility(
          visible: isSupportDelete == true,
          child: _buildDeleteWidget(assetModel, w, h, rowFirst),
        ),
      ],
    );
  }

  // 构建“➕”
  _buildAddWidget(double w, double h, bool rowFirst) {
    return GestureDetector(
      onTap: () => addOnTap(),
      child: Container(
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: itemBackground ?? const Color(0xFF141414),
          borderRadius: const BorderRadius.all(
            Radius.circular(4),
          ),
        ),
        margin: EdgeInsets.only(left: rowFirst ? 0 : threeItemsSpace),
        width: w,
        height: h,
        child: Image.asset(
          "assets/images/wechat_assets_picker_plus_upload.png",
          package: Constant.PACKAGE_NAME,
        ),
      ),
    );
  }

  // 构建 图片“删除”按钮
  _buildDeleteWidget(AssetModel assetModel, double w, double h, bool rowFirst) {
    return GestureDetector(
      onTap: () => deleteOnTap(assetModel),
      child: Container(
        alignment: Alignment.topRight,
        width: 32,
        height: 32,
        child: Container(
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: const Color(0xFF000000).withOpacity(0.6),
            borderRadius: const BorderRadius.all(
              Radius.circular(24),
            ),
          ),
          margin: const EdgeInsets.only(top: 3, right: 3),
          height: 24,
          width: 24,
          child: Image.asset(
            "assets/images/wechat_assets_picker_plus_cancel_media.png",
            package: Constant.PACKAGE_NAME,
          ),
        ),
      ),
    );
  }
}
